<template>
  <van-nav-bar
    :title="title"
    :left-text="leftText"
    :left-arrow="leftArrow"
    @click-left="goBack"
  />
  <van-search
    v-model="keyword"
    shape="round"
    background="#42bd56"
    placeholder="请输入搜索关键词"
    @clear="onCancel"
    @focus="onFoucs"
  />
</template>
<script>
import { defineComponent } from "vue";
import { NavBar, Search } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "Header",
  components: {
    [NavBar.name]: NavBar,
    [Search.name]: Search,
  },
  props: {
    title: {
      type: String,
    },
    onCancel: {
      type: Function,
    },
    leftArrow: {
      type: Boolean,
      default: true,
    },
  },
  setup(props) {
    const router = useRouter(),
      leftText = ref(""),
      keyword = ref("");
    leftText.value = props.leftArrow ? "返回" : "";
    const goBack = () => {
      router.go(-1);
    };
    const onFoucs = () => {
      router.push("/search");
    };
    return {
      leftText,
      keyword,
      goBack,
      onFoucs,
    };
  },
});
</script>
<style lang="less" scoped>
.van-hairline {
  &--bottom {
    &::after {
      border-bottom-width: 0 !important;
    }
  }
}
// .van-hairline--bottom::after {
//   border: none;
// }
</style>